<template>
	<mu-flexbox style="height:100vh;"
	            justify="center"
	            align="center">
		<mu-flexbox-item>
		</mu-flexbox-item>
		<mu-flexbox-item style="min-width:20em;">
			<mu-paper :zDepth="2">
				<mu-card>
					<mu-card-media title="管理员登录">
					<img src="/static/nebula_stars_planet_space_ultra_3840x2160_hd-wallpaper-72157.w560.jpg" alt="">
					</mu-card-media>
					<mu-card-text>
						<mu-text-field label="管理账户"
						               hintText="请输入账号名"
						               v-model="username"></mu-text-field>
						<br>
						<mu-text-field label="登录密码"
						               hintText="请输入密码"
									   type="password"
						               v-model="password"></mu-text-field>
					</mu-card-text>
					<mu-card-actions>
						<mu-raised-button icon="fingerprint"
						                label="登录"
						                class="demo-flat-button"
						                primary
						                @click="adminLogin" />
					</mu-card-actions>
				</mu-card>
			</mu-paper>
		</mu-flexbox-item>
		<mu-flexbox-item>
		</mu-flexbox-item>
	</mu-flexbox>
</template>
<script>
export default {
	data() {

		return {
			job: "1",
			username: localStorage.getItem("admin-login-username") || "",//"youdob",
			password: localStorage.getItem("admin-login-password") || "",//"youdob123",
			WAIT_admin_login: false,
		}
	},
	created() {
	},
	methods: {
		async adminLogin() {
			try {

				var data = new FormData()
				data.append('username', this.username)
				data.append('password', this.password)

				this.WAIT_admin_login = true;
				const login_info = await fetch(server_href + "/admin/login", {
					method: "POST",
					credentials: 'include',
					mode: 'cors',
					// mode: 'no-cors',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({
						username: this.username,
						password: this.password
					})
				}).then(res => res.json());
				localStorage.setItem("admin-login-username", this.username);
				localStorage.setItem("admin-login-password", this.password);
				if (login_info.status === "success") {
					console.log(login_info.data)
					this.$router.push("/");
				} else {
					console.error(login_info.msg)
				}
			} catch (e) {
				console.log(e);
			} finally {
				this.WAIT_admin_login = false;
			}
		}
	}
}
</script>
<style scoped>
.box {
	width: 100%;
	height: 100%;
}

.login-button {
	font-size: 1.5em;
	padding: 0.2em 0.4em;
}
</style>